<template>
  <a-card :bordered="false" size="small">
    <vxe-toolbar ref="toolbarRef" custom print export>
      <template v-slot:buttons>
        <a-button type="primary" @click="jumpAdd">
          <template #icon><PlusSquareOutlined /></template>
          新增
        </a-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="tableRef"
      :print-config="{}"
      :export-config="{}"
      border
      resizable
      show-overflow
      row-id="id"
      size="small"
      :loading="loading"
      :data="tableData"
    >
      <vxe-table-column width="50px" type="seq"></vxe-table-column>
      <vxe-table-column min-width="80px" title="流程名称">
        <template v-slot="{ row }">
          <a @click="jumpEdit(row.id)">{{ row.title }}</a>
        </template>
      </vxe-table-column>
      <vxe-table-column
        min-width="80px"
        field="dictName"
        title="资产类型"
      ></vxe-table-column>
      <vxe-table-column
        min-width="80px"
        field="creationTime"
        title="发送时间"
        :formatter="formatDateTime"
      ></vxe-table-column>

      <vxe-table-column min-width="80px" title="状态">
        <template v-slot="{ row }">
          <span v-if="row.state === 2" class="red">● 故障</span>
          <span v-else-if="row.state === 5" class="waring">● 异常</span>
          <span v-else class="green">● 正常</span>
        </template>
      </vxe-table-column>

      <vxe-table-column
        min-width="80px"
        align="center"
        title="操作"
        fixed="right"
      >
        <template v-slot="{ row }">
          <!-- <a @click="jumpDetail(row.id)">详细</a>
                <a-divider type="vertical" /> -->
          <a @click="jumpEdit(row.id)">编辑</a>
          <a-divider type="vertical" />
          <a @click="jumpDelete(row.id)">删除</a>
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      background
      size="small"
      :loading="loading"
      :current-page="tablePage.currentPage"
      :page-size="tablePage.pageSize"
      :total="tablePage.totalResult"
      :layouts="[
        'PrevPage',
        'JumpNumber',
        'NextPage',
        'FullJump',
        'Sizes',
        'Total',
      ]"
      @page-change="handlePageChange"
    ></vxe-pager>
  </a-card>
</template>
<script>
  import { Gets, Delete } from '@/api/flow/api'
  import { PlusSquareOutlined } from '@ant-design/icons-vue'
  import { formatDateTime } from '@/utils/public/tableformat'
  import { ref, onMounted } from 'vue'

  export default {
    components: {
      PlusSquareOutlined,
    },
    data() {
      return {
        loading: false,
        tableData: [],
        tablePage: {
          currentPage: 1,
          pageSize: 10,
          totalResult: 0,
        },
      }
    },
    setup() {
      const toolbarRef = ref()
      const tableRef = ref()
      onMounted(() => {
        tableRef.value.connect(toolbarRef.value)
      })
      return {
        toolbarRef,
        tableRef,
      }
    },
    created() {
      // this.getData()
    },
    methods: {
      formatDateTime,
      getData() {
        this.loading = true
        const queryData = {
          SkipCount: this.tablePage.currentPage,
          MaxResultCount: this.tablePage.pageSize,
        }

        Gets(queryData).then((res) => {
          if (res.isSuccess) {
            this.tableData = res.content.items
            this.tablePage.totalResult = res.content.totalCount
            this.loading = false
          } else {
            console.log('error', res)
            this.$message.error('请求出错了，请刷新重试')
          }
        })
      },

      // 编辑流程
      jumpEdit(id) {
        this.$router
          .push({
            path: '/flow/flowEdit',
            query: {
              id: id,
            },
          })
          .catch((err) => {
            console.log(err)
          })
      },
      // 编辑流程
      jumpAdd() {
        this.$router
          .push({
            path: '/flow/flowEdit',
          })
          .catch((err) => {
            console.log(err)
          })
      },
      //删除流程
      jumpDelete(id) {
        var that = this
        this.$confirm({
          title: '提示',
          content: '是否删除该数据？',
          onOk: () => {
            Delete({ id: id })
              .then(() => {
                that.$message.success('删除成功！')
                that.getData()
              })
              .catch((err) => {
                console.log(err)
              })
          },
        })
      },

      // table翻页事件
      handlePageChange({ currentPage, pageSize }) {
        this.tablePage.currentPage = currentPage
        this.tablePage.pageSize = pageSize
        this.getData()
      },
    },
  }
</script>
